<template>
	<view class="user-head">
		<view class="safe-box">
			<image class="avatar" @click="toogleInfo" :src='userinfo.avatar ? userinfo.avatar : "/static/imgs/avatar.png"'></image>
			<view class="look-log" @click="goLog">查看维保记录</view>
		</view>
		
		<view @click="toogleInfo" :class="['mask', {'ac': key}]" :style="[{display: display},{height: height}]"></view>
		<view :class="['info-card', {'ac': key}]">
			<view class="userinfo-head">
				<view class="safe-box">
					<view class="return" @click="toogleInfo">
						<image src="../../static/imgs/return.png"></image>
					</view>
					<view class="title">个人资料</view>
					<view class="empty"></view>
				</view>
			</view>
			<view class="content">
				<image src="../../static/imgs/user-bg.png"></image>
				<view class="box">
					<view class="avatar">
						<image :src="userinfo.avatar"></image>
					</view>
					<text class="name">{{userinfo.nickname}}</text>
					<view class="identifier">
						<image src="../../static/imgs/identification.png"></image>
						<view class="text">{{userinfo.danson}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {}, // 用户信息
				height: '', //屏幕高度
				display: 'none', // mask开关
				key: false // 开关
			};
		},
		props: {
			
		},
		mounted() {
			// 获取高度
			this.height = uni.getSystemInfoSync().screenHeight + 'px'
			this.userinfo = this.$storage.get('userinfo')
		},
		methods: {
			// 登录检测
			isLogin() {
				let res = true
				if (!this.$storage.get('token')) {
					this.$open('/pages/login-wechat/login-wechat')
					res = false
				}
				return res
			},
			// 前往维保记录
			goLog() {
				if (!this.isLogin()) return
				this.$open('/pages/maintenance-record/maintenance-record')
			},
			// 切换个人信息
			toogleInfo() {
				if (!this.isLogin()) return
				if (!this.key) {
					this.display = 'block'
					setTimeout(() => {
						this.key = !this.key
					}, 50)
				} else {
					this.key = !this.key
					setTimeout(() => {
						this.display = 'none'
					}, 500)
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';
	
	.user-head{
		@include top(0, fixed, 999);
		@include box(100%, $head-height, $bg-c);
		@include flex-col(flex-end);
		.safe-box{
			@include box($safe-width, 96rpx);
			@include flex-row(flex-start);
			.avatar{
				@include circle(64rpx);
			}
			.look-log{
				@include box(228rpx, 64rpx, $bg-a);
				border-radius:40rpx;
				@include flex-row();
				@include font-set($font-b, $color-f, 500);
				margin-left:30rpx;
			}
		}
		
		.mask{
			@include mask();
			z-index: -999;
			opacity: 0;
			transition: all .5s;
			&.ac{
				opacity: 1;
				z-index: 999;
			}
		}
		.info-card{
			transition: all .5s;
			@include top(-624rpx, fixed, 9999);
			&.ac{
				top:0;
			}
			@include box(100%, 624rpx, $bg-a);
			.userinfo-head{
				@include box(100%, $head-height, $bg-a);
				@include flex-col(flex-end);
				.return,.empty{
					@include square(60rpx);
				}
				.return{
					@include flex-row(flex-start);
					image{
						@include square(80%);
					}
				}
				.title{
					flex-grow:1;
					@include flex-row();
				}
			}
			.content{
				position: relative;
				@include box-h(448rpx);
				&>image{
					@include square();
					@include cross(absolute);
				}
				.box{
					@include square();
					@include cross(absolute, 999);
					@include flex-col(flex-start);
					.avatar{
						@include circle(200rpx);
						border: 10rpx solid $bg-b;
						&>image{
							@include circle(180rpx);
						}
						margin-top:15rpx;
					}
					.name{
						@include font-set($font-e, $color-e);
						margin-top:30rpx;
					}
					.identifier{
						margin-top:16rpx;
						@include box(282rpx, 64rpx, linear-gradient(180deg, $bg-f, $bg-e));
						@include flex-row();
						border-radius: 32rpx;
						&>image{
							@include circle(64rpx);
						}
						.text{
							@include box(218rpx, 100%);
							@include flex-row();
							@include font-set($font-b, $color-a);
						}
					}
				}
			}
		}
	}
</style>
